﻿@media only screen and (max-width: 1200px) {
    .wrapper{
        overflow-y:hidden !important;
    }
    .custom-bootstrap-table-responsive {
        border: solid 1px #dddddd;
    }
    .custom-bootstrap-table-responsive thead {
        display: none !important;
    }
    .custom-bootstrap-table-responsive tbody {
        background-color: transparent !important;
    }
    .custom-bootstrap-table-responsive tbody > tr:nth-child(odd) {
        background-color: #ffffff;
    }
    .custom-bootstrap-table-responsive tbody > tr:nth-child(even) {
        background-color: #eeeeee;
    }
    .custom-bootstrap-table-responsive td {
        display: block;
        border: solid 1px #dddddd;
        padding-left: 200px !important;
        min-height: 52px;
        position: relative;
        text-align: left;
    }
    .custom-bootstrap-table-responsive td:before {
        content: attr(data-thead-text);
        position: absolute;
        top: 0px;
        left: 0px;
        width: 180px;
        text-align: right;
        background-color: #5780cc;
        color: #fff;
        min-height: 52px;
        height: 100%;
        line-height: 52px;
        padding: 0px 12px;
        font-weight: 500;
    }
    .custom-bootstrap-table-responsive tbody > tr:nth-child(even) td:before {
        background-color: #296e96;
    }
    .custom-bootstrap-table-responsive tbody tr.sub-row .custom-bootstrap-table-responsive td.heading {
        display: none;
    }
    .custom-bootstrap-table-responsive tr.sub-row > td {
        padding-left: 0px !important;
    }
    .custom-bootstrap-table-responsive tr.sub-row > td:before {
        display: none;
    }
    .bill-summary-table td {
        line-height: 52px !important;
        padding: 0px 12px !important;
    }
    .bill-summary-table tbody > tr td:first-child {
        text-align: right;
        background-color: #5780cc;
        color: #fff;
        width: 180px;
    }
    .bill-summary-table tbody > tr:last-child td:first-child {
        background-color: #1c4d69;
    }
}

@media only screen and (max-width: 1024px) {
    .feedback-answers-block {
        padding-bottom: 0px;
    }
    .feedback-answers-block .feedback-rating-box-wrapper {
        display: block;
    }
    .feedback-answers-block .feedback-rating-box-wrapper .feedback-rating-box {
        display: inline-block;
        margin-bottom: 24px;
        width: 47%;
        margin-right: 5%;
    }
    .feedback-answers-block .feedback-rating-box-wrapper .feedback-rating-box:nth-child(even) {
        margin-right: 0px;
    }
    .shortcut-bar {
        display: none;
    }
    .grid-wrapper.sticky-grid {
        padding-left: 0px;
    }
    .skin-blue .sidebar a > i {
        font-size: 16px !important;
    }
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container) {
        font-size: 18px;
    }
}

@media only screen and (max-width: 1023px) {
    .right-info-bar {
        width: 100%;
        margin-top: -12px;
    }
    .item-result-wrapper .item-box .item-left > div {
        flex-wrap: wrap;
    }
    .item-result-wrapper .item-box .item-left > div > * {
        white-space: normal;
    }
    .item-result-wrapper .item-box .item-left {
        width: calc(100% - 320px);
    }
    .item-result-wrapper .item-box .item-right {
        width: 300px;
        flex-wrap: wrap;
    }
    .skin-blue .main-header .navbar {
        /* display: grid; */
        display: flex;
        flex-wrap: wrap;
    }
    .skin-blue .main-header .navbar.hnavbar {
        display: grid;
    }
    .skin-blue .main-header .navbar .sidebar-toggle {
        order: 1;
    }
    .skin-blue .main-header .navbar .sidebar-toggle.hnav-toggle {
        display: none;
    }
    .skin-blue .main-header .navbar .company-title {
        margin-left: 0px;
        font-size: 12px;
        order: 3;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: space-between;
        padding: 5px 15px;
        background-color: #616f73;
        line-height: 27px;
        flex: 1 0 auto;
    }
    .skin-blue .main-header .navbar .company-title > span {
        width: 40%;
        /*width:30%;*/
        margin-right: 5%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /*white-space:pre-wrap;*/
        text-align: left;
    }
    .skin-blue .main-header .navbar .company-title > div {
        float: none;
        width: 55%;
        text-align: right;
    }
    .skin-blue .main-header .navbar .company-title > div > span {
        float: none;
        margin-left: 0px;
    }
    .skin-blue .main-header .navbar .company-title > div > span {
        margin-right: 4px;
    }
    .skin-blue .main-header .navbar .company-title > div > span i {
        margin-right: 2px;
    }
    .skin-blue .main-header .navbar .company-title > div > span:first-child {
        /* width: 29px; */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: top;
    }
    .main-header .navbar-custom-menu {
        order: 2;
        /* width: calc(100% - 50px); */
        width: 100%;
        text-align: left;
        height: auto;
        flex: 1;
    }
    .navbar-custom-menu > .navbar-nav {
        float: none;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}

@media only screen and (max-width: 991px) {
    .navbar-custom-menu > .navbar-nav > li {
        position: relative;
    }
    .top-bar {
        background-color: transparent;
    }
    .top-bar .top-bar-box {
        margin-bottom: 16px;
    }
    .content-header > .breadcrumb.custom-breadcrumb {
        margin-top: 24px;
    }
    .timeline > li > .timeline-panel .timeline-table {
        display: block;
    }
    .timeline > li > .timeline-panel .timeline-box,
    .timeline > li > .timeline-panel .timeline-time {
        display: block;
        width: 100%;
    }
    .timeline > li > .timeline-panel .timeline-time .fa {
        font-size: 24px;
        display: inline-block;
    }
    .timeline > li > .timeline-panel .timeline-time span {
        display: inline-block;
        margin-top: 0px;
        font-size: 18px;
        margin-left: 7px;
        vertical-align: top;
    }
    .feedback-question-set .secondary-heading {
        margin-top: 20px;
    }
    .bootstrap-form-custom .control-label {
        text-align: left;
    }
    .content-header h1 .num-block {
        float: none;
        display: block;
        margin-top: 12px;
    }
    .application-shortcut {
        width: 90px;
    }
    .detailed-menu-box .section-controls {
        display: block;
        float: none;
        border-top: solid 1px #ddd;
        margin-top: 10px;
        padding-top: 10px;
    }
    .application-shortcut-list > li {
        width: 140px;
    }
}

@media only screen and (max-width: 938px) {
    .confirmation-window {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1390px) {
    .feedback-question-set .options-row .button-section {
        padding-left: 0px;
    }
    .feedback-question-set .options-row .btn {
        margin-right: 5px;
        padding: 3px 6px;
    }
    .feedback-question-set .options-row .btn:last-child {
        margin-right: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .fullscreen-popup {
        /*top: 78px;
        height: calc(100% - 78px);*/
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .box-body .dt-buttons {
        width: 100%;
        margin-top: 15px;
        margin-right: 0px;
        text-align: right;
    }
}

@media only screen and (min-width: 768px) {
    .sidebar-mini.sidebar-collapse .main-footer {
        /*margin-left: -15px !important;
        margin-right: -15px;*/
        margin: auto;
        margin-bottom: 35px;
        margin-left: 0 !important;
    }
}

@media only screen and (width: 768px) {
    .control-sidebar-dark.vaibhav-content .nav-tabs.control-sidebar-tabs > li {
        width: auto;
    }
}

@media only screen and (max-width: 767px) {
    .skin-blue .main-header .navbar .company-title {
        order: 2;
    }
    .skin-blue .main-header .navbar .sidebar-toggle {
        position: absolute;
        top: -55px;
    }
    .skin-blue .main-header .navbar .sidebar-toggle.hnav-toggle {
        display: block;
    }
    .skin-blue .main-header .navbar .company-title > div > span:last-child {
        display: none;
    }
    .right-info-bar {
        width: 100%;
    }
    div#selectedPendingItems > div .selected-count,
    div#selectedPendingItems > div .total-amt {
        width: 100%;
    }
    .fullscreen-popup {
        top: 50px;
        left: 0px;
        width: 100%;
        z-index: 5000;
        height: calc(100% - 50px);
    }
    .order-screen .right-info-bar {
        width: 100%;
        border-radius: 0px;
        margin-top: 15px;
    }
    .margin-indicator {
        position: static;
        justify-content: center;
        margin-bottom: 15px;
    }
    .margin-indicator div {
        margin: 0px 15px;
        flex-direction: column;
        text-align: center;
    }
    .margin-indicator div span {
        margin-left: 0px;
    }
    .content-wrapper .content-header h1 small {
        display: block;
        margin-left: 0px;
        margin-top: 5px;
        padding-left: 0px;
    }
    .right-info-bar {
        margin: 0px 0px 15px;
    }
    .item-result-wrapper .item-box {
        flex-wrap: wrap;
    }
    .item-result-wrapper .item-box .item-left {
        width: 100%;
        margin-right: 0px;
        border-right: none;
        border-bottom: solid 2px #a0a0a0;
    }
    .item-result-wrapper .item-box .item-right {
        width: 100%;
    }
    .sidebar-menu {
        margin-top: 44px;
    }
    .profile-avatar-wrapper .profile-detail-list li {
        line-height: 16px;
    }
    .profile-avatar-wrapper .profile-detail-list {
        margin-top: 24px;
    }
    .main-footer {
        margin: 0px -15px !important;
    }
    .content-wrapper .home-content .box-body > .app-common-form {
        margin-top: 15px;
    }
    .skin-blue .main-header .logo {
        display: block;
        background-color: #616e72;
    }
    .main-header .logo .logo-lg img {
        max-height: 50px;
    }
    .feedback-question-set .options-row {
        padding-bottom: 1px;
    }
    .feedback-question-set .options-row > .row {
        margin-bottom: 20px;
    }
    .sidebar-fixed {
        left: -230px;
        transition: all 0s;
    }
    .sidebar-open .sidebar-fixed {
        left: 0px;
        transition: all 0.3s;
    }
    .custom-form-radio {
        text-align: left;
    }
    .panel-heading-custom-form .button-section {
        margin-top: 15px;
    }
    .panel-heading-custom-form .button-section.button-section-2 {
        margin-top: 0px;
    }
    .box-body {
        padding: 15px 0px !important;
    }
    .box-body > * {
        padding: 0px 15px !important;
    }
    ul.box-list li {
        float: left;
        width: 32.5%;
        margin-right: 1%;
    }
    ul.box-list li:nth-child(3n) {
        margin-right: 0px;
    }
    .custom-accordion-panel > ul > li li {
        display: block;
        width: 100%;
        margin-right: 0px;
    }
    .control-sidebar {
        /*padding-top: 127px;*/
        padding-top: 0px;
    }
    .feedback-answers-block .feedback-rating-box-wrapper .feedback-rating-box {
        display: block;
        margin-bottom: 24px;
        width: 100%;
        margin-right: 0px;
    }
    .feedback-answers-block .feedback-rating-box-wrapper .feedback-rating-box:nth-child(even) {
        margin-right: 0px;
    }
    .box.box-default {
        min-height: auto !important;
    }
    .main-footer > span {
        display: block;
    }
    .navbar-custom-menu > .navbar-nav {
        display: inline;
        width: 100%;
    }
    /* .navbar-custom-menu > .navbar-nav.hnav > li:nth-child(1) {
        width: 30%;
        position: absolute;
        right: 0%;
        top: -45px;
    } */

    .navbar-custom-menu > .navbar-nav.hnav > li:nth-child(2) {
        width: 70%;
        display: none;
    }
    .navbar-custom-menu > .navbar-nav.hnav > li:nth-child(3) {
        margin-left: 5px;
    }
    .navbar-custom-menu > .navbar-nav > li.user-menu .dropdown-toggle {
        padding: 5px 15px;
    }
    .navbar-nav > .user-menu .user-image {
        height: 38px;
        margin-top: 0px;
    }
    .navbar-custom-menu > .navbar-nav > li.user-menu .avatar-name > .network-status {
        padding: 0px;
    }
    .navbar-custom-menu .navbar-nav > li > a.vaibhav-link {
        padding: 7px 15px;
    }
    .sidebar .logo {
        height: 60px;
    }
    .sidebar .logo img {
        height: 50px;
    }
    .application-shortcut-list > li {
        width: calc(50% - 10px);
        margin: 0px 5px 10px 5px;
    }
    .application-shortcut-list > li.application-shortcut-group > div:first-child,
    .application-shortcut-list > li.application-shortcut-group > div a.application-shortcut,
    .application-shortcut-list > li > a.application-shortcut {
        width: 100%;
    }
    .feedback-box .step-panel-holder .step-panel .question-box {
        width: 100%;
        border-right: none;
    }
    .sidebar-mini .fullscreen-wrapper .content-wrapper {
        padding-top: 36px !important;
    }
    .summary-slider-wrapper.expand {
        right: 0%;
        top: 0px;
        z-index: 1500;
        width: 100%;
        height: 100%;
    }
    .summary-slider-wrapper.expand .box {
        height: 100%;
    }
    .summary-slider-wrapper.expand .box .box-body {
        height: calc(100% - 51px);
        overflow: hidden;
        max-height: none;
        position: relative;
    }
    .summary-slider-wrapper.expand .box .box-body .row,
    .summary-slider-wrapper.expand .box .box-body .row .col-xs-12 {
        height: 100%;
    }
    .summary-slider-wrapper.expand .box .box-title {
        display: block;
    }
    .summary-slider-wrapper .slide-close-icon {
        display: block;
        float: right;
    }
    .summary-slider-wrapper .box .box-body .next-prev-button-section {
        display: block;
        position: absolute;
        bottom: 0px;
        left: 15px;
        margin-bottom: 40px;
    }
    .summary-slider-wrapper .box .box-body .step-panel-holder {
        width: 300%;
        height: calc(100% - 50px);
        position: absolute;
        top: 0px;
        left: 0px;
        overflow: auto;
    }
    .summary-slider-wrapper .box .box-body .step-panel-holder .step-panel {
        width: 30%;
        margin-right: 3.3333%;
        float: left;
        padding: 0px 15px;
    }
    .feed-back-header {
        margin-top: 5px;
    }
    .main-header {
        margin-left: 0px;
    }
}

@media only screen and (min-width: 500px) and (max-width: 767px) {
    .btn-app.col-xs-6 {
        width: 33.33333333%;
    }
}

@media only screen and (max-width: 640px) {
    .app-datatable-form {
        text-align: center;
        float: none !important;
    }
    .app-datatable-form .form-group {
        margin: 10px 0px 15px;
        display: inline-block;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        padding-left: 0px;
    }
    div.dt-buttons {
        margin-right: 0px !important;
        margin-top: 15px;
    }
}

@media only screen and (max-width: 600px) {
    div#selectedPendingItems > div {
        flex-wrap: wrap;
    }
    div#selectedPendingItems > div ul {
        width: 100%;
        margin-top: 15px;
    }
    .vehicles-row {
        position: relative;
        overflow: hidden;
    }
    .vehicle-details-column .table-toggle {
        display: block;
        position: absolute;
        top: 50%;
        left: -36px;
        margin-top: -17px;
        border-radius: 0px;
    }
    .vehicle-forms-column {
        width: 100%;
    }
    .vehicle-details-column {
        position: absolute;
        background-color: #fff;
        top: 0px;
        left: 100%;
        z-index: 20;
        padding: 0px;
        width: 80%;
        transition: all 0.2s;
    }
    .vehicle-details-column.open {
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
        left: 20%;
    }
    .car-detail-table {
        margin-bottom: 0px;
    }
    .car-detail-table > tbody > tr > td:last-child {
        border-right: none;
    }
    .detailed-menu-box .section-controls {
        float: none;
        display: block;
        margin-top: 10px;
        text-align: left;
    }
    .detailed-menu-box .close-save,
    .detailed-menu-box .close-save > a:first-child {
        margin-left: 0px;
    }
    .detailed-menu-box .close-save a > span {
        display: none;
    }
}

@media only screen and (max-width: 500px) {
    .custom-bootstrap-table-responsive td {
        padding-left: 120px !important;
    }
    .custom-bootstrap-table-responsive td:before {
        width: 110px;
        font-size: 12px;
        font-weight: normal;
    }
    .application-shortcut:not(.application-group-icon-link) {
        float: left;
        width: calc(33.3333% - 20px);
        margin: 0px 10px 15px 10px;
    }
    ul.box-list li {
        width: 48.5%;
        margin-right: 2%;
    }
    ul.box-list li:nth-child(3n) {
        margin-right: 2%;
    }
    ul.box-list li:nth-child(2n) {
        margin-right: 0px;
    }
}

@media only screen and (max-width: 450px) {
    .detailed-menu-box .section-controls .expand-collapse,
    .detailed-menu-box .section-controls .selected-items {
        display: block;
        border-top: solid 1px #ddd;
        margin-top: 10px;
        padding-top: 10px;
    }
    .detailed-menu-box .expand-collapse a:first-child {
        margin-left: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .skin-blue .main-header .navbar.hnavbar {
        background: var(--primary);
    }
    .skin-blue .main-header .navbar .company-title {
        box-shadow: none !important;
    }
    .fullscreen-wrapper .navbar-custom-menu .navbar-nav > li > a.vaibhav-link,
    .fullscreen-wrapper .navbar-custom-menu > .navbar-nav > li.user-menu .dropdown-toggle,
    .navbar-custom-menu .navbar-nav > li > a {
        padding: 5px 15px;
    }
    .fullscreen-wrapper .navbar-custom-menu > .navbar-nav > li.user-menu .dropdown-toggle,
    .fullscreen-wrapper .navbar-custom-menu .navbar-nav > li > a.vaibhav-link {
        padding: 5px 15px !important;
    }
    .application-shortcut {
        width: 105px !important;
    }
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu{
        top:44px !important;
    }
    .sidebar-menu > li > a{
        padding-left:15px !important;
    }
}

@media only screen and (max-width: 767px) {
    .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
       position: fixed;
        right: 0;
        left: 0;
        border: 1px solid #ddd;
        background: #fff;
        top: 15rem;
    }
    .wrapper{
        overflow:hidden !important;
    }
}


.notifications-menu , .messages-menu , .tasks-menu{
    font-size: 20px;
}

@media only screen and (min-width: 767px) {
    .notifications-menu > .dropdown-toggle > .label {
        position: absolute;
        top: 3px !important;
    } 

    .messages-menu > .dropdown-toggle > .label {
        position: absolute;
        top: 3px !important;
    } 

    .tasks-menu > .dropdown-toggle > .label {
        position: absolute;
        top: 3px !important;
    } 
  }

  @media only screen and (min-width: 1025px) {
    .notifications-menu > .dropdown-toggle > .label {
        position: absolute;
        top: 8px !important;
    } 

    .messages-menu > .dropdown-toggle > .label {
        position: absolute;
        top: 8px !important;
    } 

    .tasks-menu > .dropdown-toggle > .label {
        position: absolute;
        top: 8px !important;
    } 
  }